<template>
  <!-- 
    编程式导航  用JS的方式跳转路由
    - 不去使用官方所提供的router-link组件标签 而实现了组件之间的跳转 这种形式我们称之为编程式导航

    router实例方法
     - push 方法 跳转  
       - 语法: this.$router.push(path路径)
     - back 方法 返回  
       - 语法: this.$router.back(path路径)
     - replace替换//回到原始  不可以返回跳转前的页面
        - 语法 this.$router.replace(path路径)
        - 使用场景 : 登录 -> 登陆成功  支付 -> 支付成功
     - go(num) 前进或后退几步


    为了方便用$router的实例方法 给每个路由设置上name属性
    
    语法: 
    跳转把 route-link 标签 换成button或其他 并绑定点击事件
    参数是要跳转到页面的 path和name (二者选一就可)
    methods里绑定添加事件 用vm.$router.push方法跳转路由
   -->

  <div>
    <div class="footer_wrap">
      <span @click="btn('/find','Find')">发现音乐</span>
      <span @click="btn('/my','My')">我的音乐</span>
      <span @click="btn('/part','Part')">朋友</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    // 添加跳转事件 参数1: path路径  参数2: 路由的name属性值
    btn(path,name){
      this.$router.push({
        path,
        name
      })
    }
  }

}
</script>
<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap span {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #f5dede;
  color:  rgb(65, 63, 63);
  font-size: 18px;
  border: 1px solid rgb(151, 150, 150);
}
.footer_wrap span:hover {
  background-color:#eeeeee;
}
.top {
  padding-top: 62px;
}

/* 2.激活高亮样式 */
.footer_wrap .router-link-active{
  color: rgb(0, 0, 0);
  background: rgb(249, 243, 243);
}


</style>